<template>
  <div class="annotation-container-left" :class="{ collapsed: !isExpanded }">
    <div class="back-btn" @click="handleBack">
      <img style="width: 18px" src="@/assets/annotation/chevron.png" alt="" />
      <span v-if="isExpanded" class="back-btn-text">返回上一级</span>
    </div>
    <!-- {{ mouseOperationType }} -->
    <div class="menu-list" :class="{ 'collapsed-menu-list': !isExpanded }">
      <div
        class="menu-item"
        :class="{
          'menu-item-expanded': isExpanded,
          'menu-item-active': item.showActive && activeRule && activeRule(item)
        }"
        v-for="item in menuList"
        :key="item.key"
        @click="handleMenu(item)"
      >
        <span class="menu-icon iconfont" :class="`icon-${item.icon}`"></span>
        <span v-if="isExpanded">{{ item.name }}</span>
      </div>
    </div>
    <div class="expand-btn">
      <el-icon v-if="isExpanded" @click="handleExpand"><Fold /></el-icon>
      <el-icon v-else @click="handleExpand"><Expand /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, defineProps, defineEmits } from 'vue'
import { Search, More, Expand, Fold } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
// const { t } = useI18n()
const t = (key) => key;
const props = defineProps({
  menuList: {
    type: Array,
    default: () => []
  },
  mouseOperationType: {
    type: String,
    default: 'select'
  },
  activeRule: {
    type: Function,
    default: () => null
  }
})
const emits = defineEmits(['handleMenu', 'handleBack'])
const isExpanded = ref(true)

function handleExpand() {
  isExpanded.value = !isExpanded.value
}

function handleMenu(item) {
  emits('handleMenu', item)
}
function handleBack(item) {
  emits('handleBack', item)
}
</script>

<style lang="scss" scoped>
.annotation-container-left {
  // width: 200px;
  height: 100%;
  background-color: #fff;
  // padding: 0;
  border-right: 1px solid #d1d5db;
  width: 200px;
  // min-width: 200px;
  display: flex;
  flex-direction: column;
  padding-bottom: 9px;
  // transition:
  //   width 0.3s ease,
  //   min-width 0.3s ease; // 添加 min-width 的过渡效果
  flex-shrink: 0;
  &.collapsed {
    /* 缩小后的宽度 */
    // min-width: initial;
    width: 64px;
    .back-btn {
      justify-content: center;
    }
  }
  .back-btn {
    height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    color: #0a0d12;
    cursor: pointer;
    // background: #f5f5f5;
    .back-btn-text {
      font-size: 18px;
      color: #0a0d12;
      margin-left: 8px;
    }
  }
  .menu-list {
    flex: 1;
    padding: 18px;
    &.collapsed-menu-list {
      padding: 8px;
      .menu-item {
        justify-content: center;
        .menu-icon {
          margin-right: 0;
        }
      }
    }

    .menu-item {
      height: 48px;
      background: #ffffff;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #f5f5f5;
      margin-bottom: 6px;

      display: flex;
      align-items: center;
      cursor: pointer;
      &-expanded {
        padding-left: 18px;
      }
      color: #0a0d12;
      font-size: 16px;
      .menu-icon {
        display: inline-block;
        font-size: 16px;
        margin-right: 8px;
      }
      &:hover {
        color: #6172f3;
        border-color: #6172f3;
      }
      &.menu-item-active {
        color: #6172f3;
        border-color: #6172f3;
        background: #eef4ff;
        position: relative;
        &::after {
          content: '';
          width: 4px;
          height: 24px;
          background: #444ce7;
          border-radius: 2px 2px 2px 2px;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(50%, -50%);
        }
      }
    }
  }
  .expand-btn {
    display: flex;
    justify-content: flex-end;
    margin-right: 8px;
    cursor: pointer;
  }
}
</style>
